class Answer_Sheet{
    constructor(el){
        if(typeof el === 'string'){
            this.el = document.querySelector(el)
        }else{
            this.el = el
        }
        this.datas = datas
        this.answer = ['A','B','C','D','E','F']
        this.i = 0
        this.init()
    }
    $(el){
       return document.querySelector(el)
    }
    gets(el){
        return [...document.querySelectorAll(el)]
    }
    init(){
        this.render()
        this.time()
        this.next()
        this.shoucangFn()
        this.foot()
        this.html()
        this.clickFn()
        this.okFn()
    }
    // 渲染题目
    render(){
        let content = this.$('.content'),
            head_center = this.$('.head_center'),
            answer = this.datas[this.i].myAnswer
        head_center.innerHTML = `当前第${this.i+1}共${this.datas.length}题`
        content.innerHTML = `<h4><span>第${this.datas[this.i].questionId}题、</span>${this.datas[this.i].questionTitle}</h4>
                            <ul>
                            ${this.datas[this.i].questionItems.split(';').map((opt,index)=>{
                                return `<li>
                                    <input type="radio" name="${this.i}" id="${this.i}-${index}" value="${this.answer[index]}" ${answer === this.answer[index]? 'checked':''}>
                                    <label for="${this.i}-${index}">${this.answer[index]}&nbsp${opt} </label>
                                </li>`
                            }).join('')}    
                            </ul>`
        this.answerFn()
    }
    // 计时器
    time(){
        let num = 0,
            seconds = 0,
            hours = 0
        this.flag =false
        this.timer = setInterval(()=>{
            if(this.flag) return;
            num++
            if(num === 60){
                num = 0
                seconds++
            }if(seconds === 60){
                hours++
            }
            function zero(n){
            return  n<10? '0'+n : n
            }
            this.$('.head_right div').innerHTML = zero(hours)+':'+ zero(seconds) + ':'+ zero(num)
        },1000)
        this.bofang()
    }
    html(){
        let rs = ''
        this.ul = this.$('.foot ul')
        for(let j=0;j<this.datas.length;j++){
            rs+=`<li class=${j=== this.i ?"active":''}>${j+1}</li>`
        }
        this.ul.innerHTML = rs
        this.list = [...this.ul.querySelectorAll('li')]
    }
    bofang(){
        this.span = this.$('.head_right span')
        this.span.addEventListener('click',()=>{
            this.span.classList.toggle('icon-bofang')
            this.flag = this.flag? false : true
            this.timer
        })
    }
    okFn(){
        this.$('.ok').addEventListener('click',()=>{
            const n = this.datas.filter(v=>!v.myAnswer).length
            if(n>0){
                if(confirm(`${n}道题未完成，是否确认提交？`)){
                    this.getTotal()
                }
            }else{
                this.getTotal()
            }
        })
    }
    getTotal(){
        const total = this.datas.reduce((prev,val)=>{
            const curNum = val.myAnswer?.toLowerCase() === val.questionAnswer.toLowerCase()?5:0
            return prev + curNum
        },0)
         alert(`总分:${total}`)
         const allInp = [...this.gets('.box button'), ...this.gets('.box input'),...this.gets('foot li')]
         allInp.forEach(el => el.disabled = true)
    }
    next(){
        let next = this.$('.next')
        next.addEventListener('click',()=>{
            if(this.i<this.datas.length-1){
                this.$('.active').classList.remove('active')
                this.list[this.i].classList.add('newBg')
            }
            this.i++
            if(this.i>this.datas.length-1) this.i = this.datas.length-1
            this.render()
            this.list[this.i].classList.add('active')
        })
    }
    shoucangFn(){
        this.shoucang = this.$('.btn_left')
        this.shoucang.addEventListener('click',()=>{
            this.shoucang.style.color = 'red'
            this.shoucang.innerHTML = '<span class="iconfont icon-shoucang"></span>已收藏'
        })
    }
    clickFn(){
        this.ul.addEventListener('click',(e)=>{
            let target = e.target
            if(target.nodeName == 'LI'){
                this.$('.active').classList.remove('active')
                this.list[this.i].classList.add('newBg')
                target.classList.add('active')
                this.i = this.list.indexOf(target)
                this.render()
            }
        })
    }
    answerFn(){
        this.gets('input').forEach((inp)=>{
            inp.addEventListener('change',()=>{
                this.datas[this.i].myAnswer = inp.value
                this.list[this.i].classList.add('checked')
                const num = this.datas.filter(item=>item.myAnswer).length/this.datas.length
                this.$('.head_left p').style.width = num*100 + '%'
                this.$('.head_left span').innerHTML = '已完成' + num*100 + '%'
            })   
        })
    }
    foot(){
        let open = this.$('.foot h5')
        open.addEventListener('click',()=>{
            let span = this.$('.foot span')
            span.classList.toggle('icon-xiajiantou')
            this.ul.classList.toggle('show')
        })
    }
}
new Answer_Sheet('.box',datas)
